<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例 - 按钮工具栏</title>
  <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60"
       aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
    <span class="sr-only">40% 完成</span>
  </div>
</div>


<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 90%;">
    <span class="sr-only">90% 完成（成功）</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 30%;">
    <span class="sr-only">30% 完成（信息）</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 20%;">
    <span class="sr-only">20% 完成（警告）</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 10%;">
    <span class="sr-only">10% 完成（危险）</span>
  </div>
</div>


<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 90%;">
    <span class="sr-only">90% 完成（成功）</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 30%;">
    <span class="sr-only">30% 完成（信息）</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 20%;">
    <span class="sr-only">20% 完成（警告）</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 10%;">
    <span class="sr-only">10% 完成（危险）</span>
  </div>
</div>


<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 40%;">
    <span class="sr-only">40% 完成</span>
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 40%;">
    <span class="sr-only">40% 完成</span>
  </div>
  <div class="progress-bar progress-bar-info" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 30%;">
    <span class="sr-only">30% 完成（信息）</span>
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar"
       aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
       style="width: 20%;">
    <span class="sr-only">20% 完成（警告）</span>
  </div>
</div>

</body>
</html>